<template>
    <div>
        <el-row>
            <el-col :span="24"></el-col>
        </el-row>

        <el-row style="margin-bottom: 10px">
            <el-col :span="24">
                <el-button type="primary" @click="state.dialogSaveVisible = true">新增</el-button>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <el-table :data="state.tableData" border style="width: 100%">
                    <el-table-column prop="id" label="ID" width="180" />
                    <el-table-column prop="keywords" label="关键字" width="180" />
                    <el-table-column prop="type" label="回复类型" />
                    <el-table-column prop="status" label="是否显示" />
                    <el-table-column label="详情操作" align="center">
                        <template #default="props">
                            <el-button link type="primary" @click="update(props.row)">修改</el-button>
                            <el-button link type="primary" @click="del(props.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>

        <div class="pagination-container">
            <el-pagination
                :page-size="state.pageValidate.pageSize"
                layout="prev, pager, next"
                :total="state.total"
                @current-change="handleCurrentChange"
            />
        </div>

        <el-dialog v-model="state.dialogSaveVisible" title="新增" width="800">
            <el-form :model="state.form" label-width="auto" style="max-width: 600px">
                <el-form-item label="关键字">
                    <div class="arrbox">
                        <el-tag
                            v-for="(item, index) in state.labelarr"
                            :key="index"
                            type="success"
                            closable
                            class="mr5"
                            :disable-transitions="false"
                            @close="handleClose(item)"
                        >{{ item }}
                        </el-tag>
                        <el-input
                            v-model="state.val"

                            class="arrbox_ip"
                            placeholder="输入后回车"
                            style="width: 90%;"
                            @change="addlabel"
                        />
                    </div>
                </el-form-item>
                <el-form-item label="规则状态">
                    <el-radio-group v-model="state.form.status">
                        <el-radio value="true">启用</el-radio>
                        <el-radio value="false">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="消息类型" prop="type">
                    <el-select
                        v-model="state.form.type"
                        placeholder="请选择规则状态"
                        @change="RuleFactor(state.form.type)"
                    >
                        <el-option label="文字消息" value="text">文字消息</el-option>

                    </el-select>
                </el-form-item>

                <el-form-item v-if="state.form.type === 'text'" label="规则内容：" prop="content">
                    <el-input
                        v-model="state.form.contents.content"
                        placeholder="请填写规则内容"
                        type="textarea"
                    />
                </el-form-item>


                <!--                <el-form-item label="内容">-->
                <!--                    <el-input v-model="state.form.data"  type="textarea" />-->
                <!--                </el-form-item>-->

                <el-form-item>
                    <el-button type="primary" @click="keywordBtn">提交</el-button>

                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>

<script setup lang="ts">

import {postRequest} from "~/composables/http";

const state = reactive(<any>{
    dialogUpdateVisible: false,
    dialogSaveVisible: false,
    dialogDelVisible: false,
    pageValidate: {
        pageNo: 1,
        pageSize: 8
    },
    total: 10,
    queryFrom: {
        keywords: '',
        type: ''
    },
    tableData: [],
    form: {
        status: true,
        type: '',
        keywords: '',
        contents: {
            content: '',
            articleData: {},
            mediaId: '',
            srcUrl: '',
            articleId: null
        },
        id: null
    },
    labelarr: [],
    val: ''
});


// 下拉选择
function RuleFactor(type: any) {
    switch (type) {
        case 'text':
            state.form.contents.mediaId = '';
            state.form.contents.srcUrl = '';
            state.form.contents.articleData = {};
            break;
        case 'news':
            state.form.contents.mediaId = '';
            state.form.contents.content = '';
            state.form.contents.srcUrl = '';
            state.form.contents.articleData = {};
            break;
        default:
            state.form.contents.content = '';
            state.form.contents.mediaId = '';
            state.form.contents.articleData = {};
    }
    // this.$refs['formValidate'].resetFields();
}

function addlabel() {
    const count = state.labelarr.indexOf(state.val);
    if (count === -1) {
        state.labelarr.push(state.val);
    }
    state.val = '';
}

function handleClose(tag: any) {
    const index = state.labelarr.indexOf(tag);
    state.labelarr.splice(index, 1);
}


function init() {
	postRequest('/api/admin/wechat/keywords/reply/page', {
        pageValidate: { pageValidate: state.pageValidate },
        params: state.queryFrom
    }).then((res: any) => {
        state.tableData = res.data.lists;
        state.total = res.data.count;
        state.pageValidate.pageSize = res.data.pageSize;
        state.pageValidate.pageNo = res.data.pageNo;
    });
}

/**
 * 关键字提交
 */
function keywordBtn() {
    state.form.keywords = state.labelarr.join(',');
    state.form.data = JSON.stringify(state.form.contents);
	postRequest('/api/admin/wechat/keywords/reply/save', state.form).then(res => {
        console.log(res);
        if (res.data.code === 200) {
            ElMessage.success('新增成功');
            state.dialogSaveVisible = false;
        } else {
            ElMessage.error(res.data.msg);
        }
    });
}


/**
 * 分页
 * @param val
 */
const handleCurrentChange = (val: number) => {
    state.pageValidate.pageNo = val;
    init();
};


function update(data: any) {
    state.dialogUpdateVisible = true;
}

/**
 * 删除
 * @param data
 */
function del(data: any) {
	postRequest(`/api/admin/wechat/keywords/reply/delete?id=${data.id}`, {}).then((res: any) => {
        if (res.code === 200) {
            ElMessage.success('删除成功');
            init();
        } else {
            ElMessage.error(res.msg);
        }
    });
}

init();

</script>


<style scoped lang="scss">
.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 20px; /* 可根据需要调整外边距 */
}

.arrbox {
    background-color: white;
    font-size: 12px;
    border: 1px solid #dcdee2;
    border-radius: 6px;
    margin-bottom: 0px;
    padding: 0 5px;
    text-align: left;
    box-sizing: border-box;
    width: 90%;
}

.arrbox_ip {
    font-size: 12px;
    border: none;
    box-shadow: none;
    outline: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
    width: auto !important;
    max-width: inherit;
    min-width: 80px;
    vertical-align: top;
    color: #34495e;
    margin: 2px;
}
</style>
